<template>
  <el-container>
    <RegionTree @on-choose-region="filetrRegion" />
    <el-main>
      <Main v-if="pieData.isShow" :pieData="pieData.data" />
    </el-main>
  </el-container>
</template>
<script lang="ts" setup>
import { ref, onMounted, provide, computed, watch, reactive } from "vue";
import Main from "./components/main.vue";
import { ElTree, ElScrollbar } from "element-plus";
import { useRegion } from "@/store/backend/SysM/region";
import { useOverView } from "@/store/backend/EquipM/overView";
import RegionTree from "@/components/roleRegionTree/index.vue";
import { useAccess } from "@/store/backend/DeviceM/access";

const access = useAccess();
const filterText = ref("");
const treeRef = ref<InstanceType<typeof ElTree>>();
const region = useRegion();
const overview = useOverView();
const verticalMenusRef = ref<InstanceType<typeof ElScrollbar>>();

const defaultProps = {
  children: "children",
  label: "areaName",
};

watch(filterText, (val) => {
  treeRef.value!.filter(val);
});

const filterNode = (value: string, data: any) => {
  console.log("value", value, "data", data);

  if (!value) return true;
  return data.label.includes(value);
};

const state: { regionOptions: anyObj[] } = reactive({
  regionOptions: [], //区域列表
});

interface Region {
  address: string | null;
  addressDetail: string | null;
  areaFlag: string | null;
  areaId: number;
  areaName: string | null;
  areaNo: string | null;
  children: Region[];
  createBy: string | null;
  createTime: string | null;
  endTime: string | null;
  params: any;
  parentId: number;
  searchValue: string | null;
  startTime: string | null;
  updateBy: string | null;
  updateTime: string | null;
}
const filetrRegion = (row: Region, node: any) => {
  pieData.isShow = false;
  overview.newData = [];
  //判断node属性中checkedNodes是否为空
  if (node.checkedKeys.length == 0) {
    overview.getBusinessData(overViewRegion.regions);
    overview.getDevicesData(region.regionIds);
    overview
      .getEquipOver({
        regions: region.regionIds,
        institution: access.companyid ? access.companyid : "" + "",
      })
      .then(() => {
        pieData.data = [
          { value: overview.devSum, name: "总量" },
          ...overview.newData,
        ];
        pieData.isShow = true;
        console.log("pieData", pieData);
      });
  } else {
    //将所选区域id赋值给总览区域
    overview.getBusinessData(node.checkedKeys);
    overview.getDevicesData(node.checkedKeys);
    overview.getEquipOver({ regions: node.checkedKeys }).then(() => {
      pieData.data = [
        { value: overview.devSum, name: "总量" },
        ...overview.newData,
      ];
      pieData.isShow = true;
      console.log("pieData", pieData);
    });
  }
};
type Pie = {
  value: number;
  name: string;
};
//总览区域默认选空 设备与企业
const overViewRegion = reactive({
  regions: [],
});
const pieData: { data: Pie[]; isShow: boolean } = reactive({
  data: [],
  isShow: false,
});
onMounted(() => {
  //获取区域下拉列表数据
  region.getRegionByRole().then((res: any) => {
    state.regionOptions = res;
  });
  overview.getEquipOver({ regions: region.regionIds }).then(() => {
    pieData.data = [
      { value: overview.devSum, name: "总量" },
      ...overview.newData,
    ];
    pieData.isShow = true;
    console.log("pieData", pieData);
  });
  //获取最新接入企业 第一页
  overview.getBusinessData(overViewRegion.regions);
  overview.getDevicesData(region.regionIds);
});

// 实例化表格后，将 baTable 的实例提供给上下文
// provide("baTable", baTable);
</script>
<style lang="scss" scoped>
.el-container {
  .el-main {
    padding: 0;
  }
}

.default-main {
  margin-top: 0;
}

.growth-chart {
  margin-bottom: 20px;

  .count-chart,
  .normal-chart,
  .warn-chart,
  .faul-chart {
    height: 260px;
  }
}

.overViewList {
  .new-device-card :deep(.el-card__body) {
    padding: 0;

    .new-device-growth {
      height: 300px;

      .new-device-item {
        display: flex;
        align-items: center;
        padding: 20px;
        margin: 10px 15px;
        box-shadow: 0 0 30px 0 rgba(82, 63, 105, 0.05);
        background-color: var(--ba-bg-color-overlay);
        cursor: pointer;

        &:hover {
          box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04),
            0px 8px 20px rgba(0, 0, 0, 0.08);
        }

        .new-device-avatar {
          height: 48px;
          width: 48px;
          border-radius: 50%;
        }

        .new-device-base {
          margin-left: 10px;
          color: #2c3f5d;

          .new-device-name {
            font-size: 15px;
          }

          .new-device-time {
            font-size: 13px;
          }
        }

        .new-device-arrow {
          margin-left: auto;
        }
      }
    }
  }
}

@media screen and (max-width: 425px) {
  .welcome-img {
    display: none;
  }
}

@media screen and (max-width: 1200px) {
  .lg-mb-20 {
    margin-bottom: 20px;
  }
}

.div {
  color: #ee6666;
}
</style>
